* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --font-size: var(--vscode-font-size, 13px);
  --foreground: var(--vscode-foreground, #cccccc);
  --background: var(--vscode-editor-background, #1e1e1e);
  --input-background: var(--vscode-input-background, #3c3c3c);
  --input-border: var(--vscode-input-border, #3c3c3c);
  --input-foreground: var(--vscode-input-foreground, #cccccc);
  --button-background: var(--vscode-button-background, #0e639c);
  --button-foreground: var(--vscode-button-foreground, #ffffff);
  --button-hover: var(--vscode-button-hoverBackground, #1177bb);
  --panel-border: var(--vscode-panel-border, #80808059);
  --selection-background: var(--vscode-editor-inactiveSelectionBackground, #3a3d41);
  --error-background: var(--vscode-inputValidation-errorBackground, #5a1d1d);
  --error-foreground: var(--vscode-inputValidation-errorForeground, #f48771);
  --accent: var(--vscode-focusBorder, #007fd4);
  --code-background: var(--vscode-textCodeBlock-background, #2d2d2d);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--foreground);
  background: var(--background);
  height: 100vh;
  overflow: hidden;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--panel-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Code block styling */
pre {
  background: var(--code-background);
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

code {
  font-family: var(--vscode-editor-font-family, 'Menlo', 'Monaco', 'Courier New', monospace);
  font-size: var(--vscode-editor-font-size, 12px);
}

/* Inline code */
p code, li code {
  background: var(--code-background);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Lists */
ul, ol {
  padding-left: 20px;
  margin: 8px 0;
}

li {
  margin: 4px 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 12px 0 8px;
  font-weight: 600;
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }

/* Paragraphs */
p {
  margin: 8px 0;
  line-height: 1.5;
}

/* Blockquotes */
blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 8px 0;
  opacity: 0.8;
}

/* Tables */
table {
  border-collapse: collapse;
  margin: 8px 0;
  width: 100%;
}

th, td {
  border: 1px solid var(--panel-border);
  padding: 8px;
  text-align: left;
}

th {
  background: var(--selection-background);
}

